import { Button, DatePicker, Form, FormInstance, Input } from 'antd'
import React, { memo } from 'react'
import * as XLSX from 'xlsx'

interface SearchFormProps {
  form: FormInstance<any>
  params: {type:string,name:string,label:string}[]
  exportToExcel:()=>void
  onFinsh:()=>void
}
// 根据时间、时间筛选...
const SearchForm: React.FC<SearchFormProps> = ({ form, params,onFinsh,exportToExcel }) => {
  const { RangePicker } = DatePicker;

  return (
    <Form 
    layout={"inline"}
    style={{
      "justifyContent": "space-around"
    }}
    form={form}
    onFieldsChange={(changedFields, allFields) => {
      // const rangeValue = allFields.va['range-picker'];
      console.log(changedFields, allFields);
      console.log(form.getFieldsValue()['date'])
      const date=form.getFieldsValue()['date'];
      if(date)
      console.log([date[0].format('YYYY-MM-DD'), date[1].format('YYYY-MM-DD')])

    }}
    >
      {params.map(item => {
        if(item.type==='date')
        return (
          <Form.Item key={"formItem"+item.name} name={item.name} label={item.label} rules={[{ type: 'array' as const,  message: '请选择时间!' }]}>
            <RangePicker />
          </Form.Item>
        )
        else if(item.type==='input')
        return (
          <Form.Item key={"formItem"+item.name} name={item.name} label={item.label} >
          <Input  />
        </Form.Item>
      )
      })}
      <Form.Item >
        <Button onClick={onFinsh} type="primary">筛选</Button>
      </Form.Item>
      <Form.Item >
        <Button style={{background:"green"}} onClick={exportToExcel} type="primary">导出</Button>
      </Form.Item>
      
    </Form>
  )
}
export default memo(SearchForm)